<template>
  <div class="dashboard">
  <!-- 左侧部分 -->
  <el-card class="user-card">
  <div class="user-info">
  <el-avatar :src="avatarUrl" size="large"></el-avatar>
  <div class="user-details">
  <div class="user-name">{{ userName }}</div>
  <div class="user-role">{{ userRole }}</div>
  <div class="last-login">上次登录时间：{{ lastLoginTime }}</div>
  </div>
  </div>
  <el-alert
  title="公告"
  type="success"
  description="嗨嗨，又来上班啦，还记得今天的工作内容嘛？"
  show-icon
  :closable="false"
  :center="true"
  ></el-alert>
  <el-table :data="customerList" >
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="gender" label="性别"></el-table-column>
  <el-table-column prop="phone" label="电话"></el-table-column>
  </el-table>
  <div>
        <iframe src="https://ganlvtech.github.io/phaser-catch-the-cat/" width="350px" height="350px"></iframe>

  </div>
  </el-card>
  
  <!-- 右侧部分 -->
  <div class="right-side">
    <el-card class="order-card">
  <div class="order-header">
    <div class="order-title">订单列表</div>
    <div class="search">
      <el-input
        v-model="searchValue"
        placeholder="请输入关键字搜索"
        prefix-icon="el-icon-search"
        clearable
        @clear="handleClearSearch"
        @keyup.enter.native="handleSearch"
      ></el-input>
    </div>
  </div>
  <el-table :data="filteredOrders" >
    <el-table-column prop="type" label="编号"></el-table-column>
    <el-table-column prop="amount" label="金额"></el-table-column>
    <el-table-column prop="status" label="状态"></el-table-column>
  </el-table>
</el-card>


  
    <el-card class="chart-card">
      <div class="chart-header">
        <div class="chart-title">订单状态</div>
      </div>
      <div class="chart">
        <el-chart :options="chartOptions"></el-chart>
      </div>
      <div>
        <iframe src="https://thisissand.com/" width="100%" height="250"></iframe>

  </div>
    </el-card>
    
  
    <el-card class="calendar-card">
      <div class="calendar-header">
        <div class="calendar-title">日期日历</div>
      </div>
      <div class="calendar" style="height: auto;">
        <el-calendar v-model="calendarDate"></el-calendar>
      </div>
    </el-card>
  </div>
  </div>
  </template>


  
  <script>
  
  import { ref, computed } from "vue";
  import { ElAvatar, ElCard, ElTable, ElTableColumn, ElChart, ElCalendar, ElInput, ElAlert } from "element-plus";
  import * as echarts from "echarts";
  
  export default {
  name: "homes",
  components: {
  ElAvatar,
  ElCard,
  ElTable,
  ElTableColumn,
  ElChart,
  ElCalendar,
  ElInput,
  ElAlert,
  },
  setup() {
  // 用户信息
  const avatarUrl = ref("https://picsum.photos/200/200");
  const userName = ref("小明");
  const userRole = ref("管理员");
  const lastLoginTime = ref("2023-05-04 10:00:00");
  
  // 客户列表
  const customerList = ref([
    { id: 1, name: "张三", age: 30, gender: "男", phone: "13800138000" },
    { id: 2, name: "李四", age: 25, gender: "女", phone: "13800138001" },
    { id: 3, name: "王五", age: 40, gender: "男", phone: "13800138002" },
    { id: 4, name: "赵六", age: 28, gender: "女", phone: "13800138583" },
    { id: 5, name: "赵柒", age: 25, gender: "女", phone: "13813381303" },
    { id: 6, name: "赵把", age: 27, gender: "女", phone: "13435533003" },
    { id: 7, name: "赵玖", age: 31, gender: "女", phone: "13874275403" },
    { id: 8, name: "赵时", age: 42, gender: "女", phone: "13685877543" },
    { id: 9, name: "赵事宜", age: 18, gender: "女", phone: "13685254415" },
  ]);
  
  // 订单列表
  const orderList = ref([
  { id: 1, type: "VIP45", amount: 100, status: "已完成" },
  { id: 2, type: "SVIP15", amount: 500, status: "已取消" },
  { id: 3, type: "VIP085", amount: 200, status: "待支付" },
  { id: 4, type: "SVIP011", amount: 800, status: "待发货" },
  { id: 5, type: "VIP55", amount: 300, status: "已完成" },
  { id: 6, type: "SVIP015", amount: 1000, status: "已完成" },
  { id: 7, type: "VIP95", amount: 150, status: "已取消" },
  { id: 8, type: "VIP157", amount: 600, status: "待支付" },
  { id: 9, type: "SVIP54", amount: 250, status: "待发货" },
  { id: 10, type: "VIP284", amount: 1200, status: "已完成" },
]);
  // 饼图数据
  const chartData = ref([
    { name: "普通订单", value: 60 },
    { name: "VIP订单", value: 40 },
  ]);
  
  // 饼图配置
  const chartOptions = ref({
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      orient: "vertical",
      left: 10,
      data: ["普通订单", "VIP订单"],
    },
    series: [
      {
        name: "订单类型",
        type: "pie",
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "30",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: chartData.value,
      },
    ],
  });
  
  // 日历日期
  const calendarDate = ref(new Date());
  
  // 搜索关键字
  const searchValue = ref("");
  
  // 根据搜索关键字过滤订单列表
  const filteredOrders = computed(() => {
    if (!searchValue.value) {
      return orderList.value;
    }
    return orderList.value.filter(
      (order) =>
        order.type.indexOf(searchValue.value) !== -1 ||
        order.status.indexOf(searchValue.value) !== -1
    );
  });
  
  // 清空搜索框
  const handleClearSearch = () => {
    searchValue.value = "";
  };
  
  // 搜索订单
  const handleSearch = () => {
    console.log("searchValue:", searchValue.value);
  };
  
  // 初始化饼图
  const initChart = () => {
    const chart = echarts.init(document.querySelector(".chart"));
    chart.setOption(chartOptions.value);
  };
  
  return {
    avatarUrl,
    userName,
    userRole,
    lastLoginTime,
    customerList,
    filteredOrders,
    chartOptions,
    calendarDate,
    searchValue,
    initChart,
    handleClearSearch,
    handleSearch,
  };
  },
  mounted() {
  // 初始化饼图
  this.initChart();
  },
  };
  </script>
  
  <style scoped>
  .dashboard {
  display: flex;
  justify-content: space-between;
  margin: 20px;
  }
  
  .user-card {
  width: 30%;
  }
  
  .user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  }
  
  .user-details {
  margin-left: 20px;
  }
  
  .user-name {
  font-size: 20px;
  margin-top: 10px;
  }
  
  .user-role {
  font-size: 16px;
  margin-top: 5px;
  }
  
  .last-login {
  font-size: 14px;
  margin-top: 10px;
  }
  
  .right-side {
  width: 65%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  }
  
  .order-card {
  width: 100%;
  }
  
  .order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  }
  
  .order-title {
  font-size: 20px;
  font-weight: bold;
  }
  
  .chart-card {
  width: 48%;
  margin-bottom: 20px;
  }
  
  .chart-header {
  padding: 10px 20px;
  }
  
  .chart-title {
  font-size: 20px;
  font-weight: bold;
  }
  
  .chart {
  height: 300px;
  }
  
  .calendar-card {
  width: 48%;
  margin-bottom: 20px;
  }
  
  .calendar-header {
  padding: 10px 20px;
  }
  
  .calendar-title {
  font-size: 20px;
  font-weight: bold;
  }
  
  .calendar {
  height: 300px;
  overflow: hidden;
  }
  .order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.order-title {
  font-size: 20px;
  font-weight: bold;
}

.search {
  display: flex;
  align-items: center;
}

  </style>